<template>
  <div class="input-unit">
    <InputNumber
      v-if="type === 'number'"
      :id="numberId"
      :placeholder="placeholder"
      :formatter="numberFormat"
      :size="size"
      :max="max"
      :min="min"
      :readonly="readonly"
      :precision="precision"
      v-model="CurrentVal"
      :disabled="disabled ? true : false"
      :active-change="false"
    ></InputNumber>
    <i-input
      v-else
      :placeholder="placeholder"
      :size="size"
      :type="type"
      :rows="rows"
      :readonly="readonly"
      v-model="CurrentVal"
      :disabled="disabled ? true : false"
      :element-id="textareaId"
      :maxlength="maxLength"
      @on-enter="enter">
    </i-input>
    <span v-if="maxLength && type === 'textarea'" class="input__count">{{ textLength }}/{{ upperLimit }}</span>
    <div class="unit-text">{{ unit }}</div>
  </div>
</template>

<script lang="ts">
import { Util, debounce } from '@ibizstudio/runtime';
import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";

@Component({})
export default class InputBox extends Vue {
  /**
   * 双向绑定值
   * @type {any}
   * @memberof InputBox
   */
  @Model("change") readonly itemValue?: any;

  /**
   * 生命周期 （多行文本十行高度问题）
   * @type {any}
   * @memberof InputBox
   */
  mounted() {
    if (this.textareaId) {
      let textarea: any = document.getElementById(this.textareaId);
      if (textarea) {
        textarea.style = this.textareaStyle;
      }
    }
  }

  /**
   * 单位
   * @type {String}
   * @memberof InputBox
   */
  @Prop() unit?: string;

  /**
   * 多行文本十行 特殊参数样式（模型高度自带）
   * @type {String}
   * @memberof InputBox
   */
  @Prop() textareaStyle?: string;

  /**
   * 多行文本十行 特殊参数id（模型高度自带）
   * @type {String}
   * @memberof InputBox
   */
  @Prop() textareaId?: string;
  /**
   * 大小
   * @type {String}
   * @memberof InputBox
   */
  @Prop() size?: string;
  /**
   * 最大值
   * @type {Number}
   * @memberof InputBox
   */
  @Prop() max?: number;
  /**
   * 最小值
   * @type {Number}
   * @memberof InputBox
   */
  @Prop() min?: number;

  /**
   * textarea最大值
   * @type {Number}
   * @memberof InputBox
   */
  @Prop() maxLength?: string;

  /**
   * placeholder值
   * @type {String}
   * @memberof InputBox
   */
  @Prop() placeholder?: string;

  /**
   * 是否禁用
   * @type {boolean}
   * @memberof InputBox
   */
  @Prop() disabled?: boolean;

  /**
   * 只读模式
   * 
   * @type {boolean}
   */
  @Prop({default: false}) readonly?: boolean;

  /**
   * 属性类型
   *
   * @type {string}
   * @memberof InputBox
   */
  @Prop() type?: string;

  /**
   * 文本行数
   * @type {String}
   * @memberof InputBox
   */
  @Prop({default: 2}) rows?: number;

  /**
   * 精度
   *
   * @type {number}
   * @memberof InputBox
   */
  @Prop({ default: 0 }) precision?: number;

  /**
   * 多行文本行数
   *
   * @type {string}
   * @memberof InputBox
   */
  @Prop() autoSize?: any;

  /**
   * 数值格式化
   *
   * @type {string}
   * @memberof InputBox
   */
  @Prop() valueFormat?: any;

  /**
   * 是否启用防抖
   *
   * @type {Boolean}
   * @memberof InputBox
   */
  @Prop({default: true}) isDebounce?: Boolean;

  /**
   * 数值框numberId
   */
  numberId: string = this.$util.createUUID();

  /**
   * 当前值
   *
   * @memberof InputBox
   */
  get CurrentVal() {
    if (
      Object.is(this.type, "number") &&
      this.itemValue &&
      !isNaN(this.itemValue)
    ) {
      return Number(this.itemValue);
    } else {
      return !this.itemValue && this.itemValue != 0 ? null : this.itemValue;
    }
  }

  /**
   * 值变化
   *
   * @memberof InputBox
   */
  set CurrentVal(val: any) {
    let _data: any = val;
    if (Object.is(this.type, "number") &&  Util.isExistAndNotEmpty(val) && !isNaN(val)) {
      try {
        _data = isNaN(Number(val)) ? null : Number(val);
      } catch (error) {}
    }
    if (Object.is(_data, "")) {
      _data = null;
    }
    if (this.isDebounce) {
      debounce(this.emitChangeEvent, _data, 300);
    } else {
      this.emitChangeEvent(_data);
    }
  }

  /**
   * 触发change事件
   *
   * @param {*} data
   * @memberof InputBox
   */
  emitChangeEvent(data: any) {
      this.$emit('change', data);
  }

  /**
   * 回车事件
   *
   * @param {*} $event
   * @memberof InputBox
   */
  @Emit()
  enter($event: any) {
    if (!$event || $event.keyCode !== 13) {
      return;
    }
    return $event;
  }

  /**
   * 数值值格式化
   *
   * @param {*} value
   * @memberof InputBox
   */
  numberFormat(value: any) {
    if (!this.valueFormat) {
      return value;
    }
    const _this: any = this;
    if (!isNaN(parseFloat(value)) && _this.textFormat && _this.textFormat instanceof Function) {
      return _this.textFormat(parseFloat(value), _this.valueFormat);
    }
    return value;
  }

  /**
   * 最大输入字数
   *
   * @param {*} value
   * @memberof InputBox
   */
  get upperLimit() {
    return this.$props.maxLength;
  }

  /**
   * 当前输入字数
   *
   * @param {*} value
   * @memberof InputBox
   */
  get textLength() {
    if (typeof this.CurrentVal === 'number') {
      return String(this.CurrentVal).length;
    }
    return (this.CurrentVal || '').length;
  }
  
}
</script>

<style lang="less">
@import "./input-box.less";
</style>
